<template>
	<view style="width:100%">
		<view class="dp-groupby-itemlist">
			<view class="item" v-for="(item, index) in data" :key="item.id" @click="goto"
				:data-url="'/pagesExt/groupby/product?id=' + item[idfield]">
				<!-- :data-url="'/pages/shop/product?id=' + item[idfield] + '&ptype=groupby'"> -->
				<view class="product-pic">
					<image class="image" :src="item.pic" mode="widthFix" />
					<image class="saleimg" :src="saleimg" v-if="saleimg != ''" mode="widthFix" />
				</view>
				<view class="product-info">
					<view class="p1" v-if="showname == 1">{{ item.name }}</view>
					<view class="group-num" :style="{ color: t('color2'), borderColor: t('color2') }">
						{{ item.min_num }}人团
					</view>
					<view class="p2" v-if="showprice != '0'">
						<text class="t1" :style="{ color: t('color2') }">
							<block v-if="item.usd_minprice">
								<text style="font-size:24rpx">$</text>{{ item.usd_minprice }}
								<text style="font-size:24rpx;padding-right:3px">￥{{ item.min_price }}</text>
							</block>
							<block v-else>
								<text style="font-size:24rpx;padding-right:1px">￥</text>{{ item.min_price }}
							</block>
						</text>
					</view>
					<view class="p4" :style="{ background: '' + t('color2') + '' }">去拼团</view>
				</view>
			</view>
		</view>
		<buydialog-groupby v-if="buydialogShow" :proid="proid" @buydialogChange="buydialogChange" controller="Groupby"
			:menuindex="menuindex"></buydialog-groupby>
	</view>
</template>
<script>
export default {
	data() {
		return {
			buydialogShow: false,
			proid: 0,
		}
	},
	props: {
		menuindex: { default: -1 },
		saleimg: { default: '' },
		showname: { default: 1 },
		namecolor: { default: '#333' },
		showprice: { default: '1' },
		showsales: { default: '1' },
		showcart: { default: '1' },
		cartimg: { default: '/static/imgsrc/cart.svg' },
		data: {},
		idfield: { default: 'id' }
	},
	methods: {
		buydialogChange: function (e) {
			if (!this.buydialogShow) {
				this.proid = e.currentTarget.dataset.proid
			}
			this.buydialogShow = !this.buydialogShow;
		},
	}
}
</script>
<style>
.dp-groupby-itemlist {
	height: auto;
	position: relative;
	overflow: hidden;
	padding: 0px;
	display: flex;
	flex-wrap: wrap
}

.dp-groupby-itemlist .item {
	width: 100%;
	display: inline-block;
	position: relative;
	margin-bottom: 12rpx;
	background: #fff;
	display: flex;
	padding: 20rpx;
	border-radius: 10rpx
}

.dp-groupby-itemlist .product-pic {
	width: 30%;
	height: 0;
	overflow: hidden;
	background: #ffffff;
	padding-bottom: 30%;
	position: relative;
	border-radius: 4px;
}

.dp-groupby-itemlist .product-pic .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto
}

.dp-groupby-itemlist .product-pic .saleimg {
	position: absolute;
	width: 120rpx;
	height: auto;
	top: -6rpx;
	left: -6rpx;
}

.dp-groupby-itemlist .product-info {
	width: 70%;
	padding: 6rpx 10rpx 5rpx 20rpx;
	position: relative;
}

.dp-groupby-itemlist .product-info .p1 {
	color: #323232;
	font-weight: bold;
	font-size: 28rpx;
	line-height: 36rpx;
	margin-bottom: 10rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 72rpx
}

.dp-groupby-itemlist .product-info .p2 {
	margin-top: 20rpx;
	height: 56rpx;
	line-height: 56rpx;
	overflow: hidden;
}

.dp-groupby-itemlist .product-info .p2 .t1 {
	font-size: 36rpx;
}

.dp-groupby-itemlist .product-info .p2 .t2 {
	margin-left: 10rpx;
	font-size: 24rpx;
	color: #aaa;
	text-decoration: line-through;
	/*letter-spacing:-1px*/
}

.dp-groupby-itemlist .product-info .p3 {
	display: flex;
	align-items: center;
	overflow: hidden;
	margin-top: 10rpx
}

.dp-groupby-itemlist .product-info .p3-1 {
	font-size: 20rpx;
	height: 30rpx;
	line-height: 30rpx;
	text-align: right;
	color: #999
}

.dp-groupby-itemlist .product-info .p4 {
	border-radius: 16rpx;
	position: absolute;
	display: relative;
	bottom: 6rpx;
	right: 4rpx;
	text-align: center;
	padding: 18rpx 20rpx;
	color: #fff;
}

.group-num {
	border-radius: 16rpx;
	padding: 8rpx 0rpx;
	text-align: center;
	border: 2rpx solid;
	width: 100rpx;
}

.dp-groupby-itemlist .product-info .p4 .icon_gouwuche {
	font-size: 28rpx;
	height: 48rpx;
	line-height: 48rpx
}

.dp-groupby-itemlist .product-info .p4 .img {
	width: 100%;
	height: 100%
}
</style>